<script setup>
import { ref, watch, computed } from 'vue'
import {createThumbnail,createImageUrl}from '@/utils/image.js'
const emit = defineEmits(['pictureCardPreview'])

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()

const props=defineProps({
    item: {
        type: Object,
        default(rawProps) {
            return {}
        }
    }
})
const file_siz=computed(()=>Math.round(props.item.file_size/ (1024 * 1024) * 100) / 100+'M')
// 预览视频文件
const handleVideo = function (item) {
    const url = createImageUrl(item)
    router.push({name:'Video',params:{id:item.hash},query:item})
    //window.open(url, '_blank');
}
const handlePictureCardPreview = function () {    
    emit('pictureCardPreview')
}
</script>

<template>
    <el-image class='content-time' :src="item.url" fit="contain" />
    <el-icon v-if="item.type === 'video/mp4'" class="video-camera" size="1.5rem" @click.stop="handleVideo(item)">
        <VideoCameraFilled />
    </el-icon>
    <div class="conten-info" @click.stop="handlePictureCardPreview"> {{ item.title }}<br />{{file_siz }}</div>
</template>

<style scoped>
.content-time {
    width: 90%;
    height: 90%;
    margin: 5%;
}

.video-camera {
    position: absolute;
    top: 5px;
    right: 5px;
}
.conten-info{
    position: absolute;
    width: 100%;
    bottom: 10px;
    height:4em;
    background-color: rgb(158, 215, 241);
    font-size:0.75em;
}
</style>